<!--中浩德人才库-->
<!DOCTYPE html>
<html ng-app="app">

	<head>
		<!--编码-->
		<meta charset="UTF-8">
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
		<!--浏览器内核-->
		<meta name=”renderer” content=”webkit”>
		<title>中浩德人才库</title>
		<!--bootStrop 3.3.7-->
		<link rel="stylesheet" type="text/css" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.css" />
		<!--angular 1.6.6-->
		<script src="plugin/angular-1.6.6/angular.js" type="text/javascript" charset="utf-8"></script>
		<!--css样式-->
		<link rel="stylesheet" media="screen" href="css/zhd.css" />
		<!--bootstrap-switch-->
		<link rel="stylesheet" media="screen" href="plugin/bootstrap-switch/css/bootstrap3/bootstrap-switch.css" />
		<!--bootstrapValidator-->
		<!--<link rel="stylesheet" media="screen" href="plugin/bootstrapvalidator-0.4.5/css/bootstrapValidator.min.css" />-->
		<!--bootstrapValidator-->
		<link rel="stylesheet" media="screen" href="plugin/bootstrapvalidator-master/css/bootstrapValidator.min.css" />
	</head>
	<style type="text/css">
		.file {
			
    position: relative;
    display: inline-block;
    background: #CCCCCC;
    border: 2px solid #999999;
    border-radius: 4px;
    overflow: hidden;
    color: #999999;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    width: 100px;
    height: 100px;
    padding: 28px 10px 20px 30px
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
	</style>
	<body ng-controller="myController">
		<loading></loading>
		<!--<script src="/adsense.js" type="text/javascript"></script>-->
		<div class="container">
			<div class="row" style="margin-top: 50px;">
			  <div style="" class="col-xs-12 col-sm-4 col-md-6 col-lg-6">
			  	<div style="margin: 0 auto; padding: 110px 35px 100px 40px; width: 400px;height: 816px; background-size: 100%; background-image: url(img/phonebg.png);">
			  		<div style="width: 100%; height: 100%; overflow-y: auto;overflow-x: hidden;">
			  			<h2 class="row text-center">{{biaoti}}</h2>
			  			<div class="text-center" style="width: ;100%;">
			  				<span style="font-size: 12px;">{{xingming}}</span>
			  			</div>
			  			<p>{{duanluo}}</p>
			  			<div  ng-repeat="item in thumb">
			  				<img style="margin:5px;width: 100%;" ng-src="{{item.imgSrc}}"/>
			  			</div>
			  		</div>
			  	</div>
			  </div>
			  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
			  	<div class="panel panel-default">
					<div class="panel-heading">输入</div>
					<div class="panel-body">
						<form>
							<div class="form-group">
								<label for="exampleInputEmail1">标题</label>
								<input type="text" class="form-control" id="exampleInputEmail1" ng-model="biaoti" placeholder="请输入标题">
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">姓名</label>
								<input type="text" class="form-control" id="exampleInputPassword1" ng-model="xingming" placeholder="请输入姓名">
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">段落</label>
								<input type="text" class="form-control" id="exampleInputPassword1" ng-model="duanluo" placeholder="请输入段落">
							</div>
							<div class="row" style="padding: 10px;">
								<div style="display: inline-block;" ng-repeat="item in thumb">
				                    <label style="position: relative;">
				                        <img style="margin:5px;width: 100px; height: 100px;" ng-src="{{item.imgSrc}}"/>
				                        <a style="padding-top: 10px; position: absolute;width: 50px;height: 50px;right: -5px;top: 0px;" class="text-center" ng-click="img_del($index)">
					                    	<div style="display: inline-block; width: 20px;height: 20px;background: #CCCCCC; border-radius: 10px;" class="text-center">
					                    		<span class="glyphicon glyphicon-remove"></span>
					                    	</div>
				                    	</a>
				                    </label>
				                    <!--<span ng-if="item.imgSrc" ng-click="img_del($index)"></span>-->
				                </div>
							</div>
							<div class="row" style="padding: 10px 15px;">
								<div class="file">
									<span style="font-size: 280%; margin: 0 auto;" class="glyphicon glyphicon-plus"></span><br />
					                	<!--图片上传-->
					                <input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>
					                <!--<input type="file" id="one-input" accept="image/*" file-model="images"/>-->
								</div>
							</div>
							<canvas id="myCanvas" style="" ></canvas>
							<img src="" alt="" id="ago" style="width: 500px;"/>
							<!--<div class="checkbox">
								<label>
						      <input type="checkbox"> Check me out
						    </label>
							</div>-->
							<button type="button"  ng-click="subBtn()" class="btn btn-default" >上传</button>
						</form>
					</div>
				</div>
				
			  </div>
			</div>
		</div>

	</body>
	<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="js/jquery.easing.min.js" type="text/javascript"></script>
	<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="plugin/bootstrap-switch/js/bootstrap-switch.js" type="text/javascript"></script>
	<script src="plugin/bootstrapvalidator-master/js/bootstrapValidator.min.js" type="text/javascript"></script>
	<script src="js/zhd.js" type="text/javascript"></script>
<script>
	var app = angular.module('app', []);
	app.controller("myController",function($scope,$http,$rootScope){
		$scope.biaoti = "我是标题";
		$scope.xingming = "我是姓名";
		$scope.duanluo = "我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落";
		
		
		$scope.subBtn = function(){
			console.log($scope.thumb)
		};
		
		
		 $scope.reader1 = new FileReader();   //创建一个FileReader接口
    $scope.form = {     //用于绑定提交内容，图片或其他数据
        image:{},
    };
    $scope.thumb = {};      //用于存放图片的base64
    $scope.thumb_default = {    //用于循环默认的‘加号’添加图片的框
        1111:{}
    };

    $scope.img_upload = function(files) { //单次提交图片的函数
    	$scope.getUrl(files[0])
        
//      $http({
//          method: 'post',
//          url: '/comm/test-upload.php?action=success',
//          data:data,
//          headers: {'Content-Type': undefined},
//          transformRequest: angular.identity
//      }).success(function(data) {
//          if (data.result_code == 'SUCCESS') {
//              $scope.form.image[data.guid] = data.result_value;
//              $scope.thumb[data.guid].status = 'SUCCESS';
//              console.log($scope.form)
//          }
//          if(data.result_code == 'FAIL'){
//              console.log(data)
//          }
//      })
    };

    $scope.img_del = function(key) {//删除，删除的时候thumb和form里面的图片数据都要删除，避免提交不必要的
        console.log(key);
        var guidArr = [];
        for(var p in $scope.thumb){
            guidArr.push(p);
        }
        delete $scope.thumb[guidArr[key]];
        delete $scope.form.image[guidArr[key]];
    };
    $scope.submit_form = function(){    //图片选择完毕后的提交，这个提交并没有提交前面的图片数据，只是提交用户操作完毕后，
　　　　　　　　　　　　　　　　　　　　　　　　//到底要上传哪些，通过提交键名或者链接，后台来判断最终用户的选择,整个思路也是如此
        $http({
            method: 'post',
            url: '/comm/test.php',
            data:$scope.form,
        }).success(function(data) {
            console.log(data);   
        })
    };
    //---------------------------------------分割线-----------------------------------------------
    $scope.getUrl = function (fil) {
    	console.log(fil)
            var Cnv = document.getElementById('myCanvas');
            var Cntx = Cnv.getContext('2d');//获取2d编辑容器
            var imgss =   new Image();//创建一个图片
            var agoimg=document.getElementById("ago");
            for (var intI = 0; intI < fil.length; intI++) {//图片回显
                var tmpFile = fil[intI];
                var reader = new FileReader();
                reader.readAsDataURL(tmpFile);
                reader.onload = function (e) {
                    url = e.target.result;
                    imgss.src = url;
                    agoimg.src=url;
                    agoimg.onload = function () {
                        //如果图片过大等比缩放
                        if(imgss.width>1024){
                        	var m = imgss.height / imgss.width;
	                         Cnv.width =1024;//该值影响缩放后图片的大小
	                         Cnv.height= 1024*m ;
	                        //img放入画布中
	                        //设置起始坐标，结束坐标
	                        Cntx.drawImage(agoimg, 0, 0,1024,1024*m);
                        }else{
                        	Cntx.drawImage(agoimg, 0, 0,imgss.width,imgss.height);
                        }
                    }
                }
            }
            $scope.pressss()
        }


        $scope.pressss = function (){//
            //获取canvas压缩后的图片数据
            var files = document.getElementById("myCanvas").toDataURL("image/png");
//          var imgs =document.getElementById("press");
//          imgs.src =Pic ;
            //上传
            // 去除多余，得到base64编码的图片字节流
//          files = files.replace(/^data:image\/(png|jpg);base64,/, "");
            //可以用ajax提交到后台，提交后可以直接存数据库，也可以保存成图片，此处略
            $scope.guid = (new Date()).valueOf();   //通过时间戳创建一个随机数，作为键名使用
	        //$scope.reader.readAsDataURL(files[0]);  //FileReader的方法，把图片转成base64
//	        $scope.reader1.onload = function(ev) {
	        	
	            $scope.$apply(function(){
	            	debugger
	                $scope.thumb[$scope.guid] = {
	                    imgSrc : files,  //接收base64
	                }
	            });
//	        };
	        
	        var data = new FormData();      //以下为像后台提交图片数据
	        data.append('image', files);
	        data.append('guid',$scope.guid);
        }
    
    
    
    
	});
</script>
</html>